<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
    width: 200px;
    height: 200px;
    background-color: pink;
}

.f30 {
    font-size: 30px;
}

.fr {
    color: red;
}
</style>
</head>
<body>
<div id="abc">2017年</div>
<script>
var div = document.querySelector("div");
console.log(div.getAttribute("id"));
//添加或设置属性
div.setAttribute("id", "box");
div.setAttribute("class",
    (div.getAttribute("class") ? div.getAttribute("class") : "") + " f30")
div.setAttribute("class",
    (div.getAttribute("class") ? div.getAttribute("class") : "") + " fr")
//div.setAttribute("class", div.getAttribute("class") + " fr")

//移除指定的属性
div.removeAttribute("id")
/*var idNode = div.getAttributeNode("id");
console.log(idNode.nodeName, idNode.nodeType, idNode.value);*/
</script>
</body>
</html>